<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1￥999/xhtml">
	<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<script type="text/javascript" src="js/ichart.1.2.min.js"></script>
<link rel="stylesheet" href="css/demo.css" type="text/css"/>
   <link href="/admin/statistics/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/admin/statistics/css/city-picker.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/admin/statistics/css/tongJi.css" />
<!-- <link href="/admin/newTemplate/css/css.css" rel="stylesheet"/> -->
<!--[if lt IE 9]>
	<script src="/admin/public/html5shiv.min.js"></script>
	<script src="/admin/public/respond.min.js"></script>
<![endif]-->
<style>
	.theme-popover2 .bt_submit{
		margin-top:20px;
	}
	.theme-popover2 .select_block>div{
		height:33.6px;
		line-height:33.6px;
		padding-top:20px;
		box-sizing: content-box;
	}
	.theme-popover2 .select_block>div>select{
		height:31px;
		line-height:31px;
		min-width:150px;
		margin-top:-3px;
		border:1px solid #ddd;
	}
	/*.theme-popover2 .select_block>div>select>option{
		line-height:36px;
		display:block;
		height:36px;
	}
	.theme-popover2 .select_block>div>span{
		font-size:14px;
	}*/
	.am-btn{
		border-radius: 4px !important;
		border:1px solid transparent;
	}
	.am-btn-default.am-btn-success {
	    background: #5EB95E;
	    color:#fff;
	    border-color:#5EB95E;
	    
	}
	.zs{
		color:#333;
	}
	
</style>
<title>信息管理系统</title>

	</head>

	<body style="overflow-x:auto;min-width:1530px;">
		<div class="main-content">
			<div class="table-list" id="IndexPreview">
				<table cellspacing="0" cellpadding="0" class="list" id="IndexPreviewTableList">
					<tbody>
						<tr class="title">
							<th style="font-size: 16px;text-align: center;">会员总数</th>
							<th class="empty-tr0"></th>
						</tr>
						<tr class="highlight">
							<td class="" style="font-size: 22px;text-align: center;">${huiyuan }</td>
							<td class="empty-tr0"></td>
						</tr>
						<tr>
							<td class=""></td>
							<td class=""></td>
							<td class=""></td>
							<td class=""></td>
							<td class=""></td>
							<td class=""></td>
							<td class="empty-tr0"></td>
						</tr>
						<tr>
							<td class="arrow-down"></td>
							<td class="arrow-down"></td>
							<td class="arrow-down"></td>
							<td class=""></td>
							<td class=""></td>
							<td class=""></td>
							<td class="empty-tr0"></td>
						</tr>
					</tbody>
				</table>
			</div>

			<div class="overview-gap" style=""></div>

			<div class="overview-detail">

				<div id="DateSelectBar">
					<div class="control-bar-wrapper clearfix" id="control-bar-wrapper">
						<div class="control-bar bg-iframe l" id="control-bar">
							<form action="/admin/statistics/index" method="post">
								<div class="l date-select-bar" id="date-select-bar">
									<a href="/admin/statistics/index?type=0&qf=0&diqu=${diqu }" class="trackable date-bar-single-day ${a }" memo="{id:'time_tody'}">今天</a>
									<span class="seprator"></span>
									<a href="/admin/statistics/index?type=1&qf=0&diqu=${diqu }" class="trackable date-bar-single-day ${b }" memo="{id:'time_yest'}">昨天</a>
									<span class="seprator"></span>
									<a href="/admin/statistics/index?type=7&qf=0&diqu=${diqu }" class="trackable ${c }" memo="{id:'time_week'}">最近7天</a>
									<span class="seprator"></span>
									<a href="/admin/statistics/index?type=30&qf=0&diqu=${diqu }" class="trackable ${d }" memo="{id:'time_month'}">最近30天</a>
								</div>
								<%-- <div id="distpicker" >
									<div class="form-group">
										<div style="position: relative;">
											<input id="city-picker3" name="diqu" value="${diqu }" class="form-control" readonly type="text"  data-toggle="city-picker"/>
											<input type="hidden" name="type"  value="${type }"/>
										</div>
									</div>
									<div class="form-group">
										<button class="btn btn-warning" id="reset" type="button">重置</button>
										<input class="btn btn-danger" id="destroy" type="submit" value="确定"/>
									</div>
								</div> --%>
							</form>
						</div>
					</div>
				</div>
				<input type="hidden" id="jieyue"  value="${jieyue}"/>
				<input type="hidden" id="shijian"  value="${shijian}"/>
				<div class="overview-gap"></div>

				<div class="index-site" id="IndexSite">
					<div class="first-row">
						<div class="clearfix table-grid">
							<div class="left">
								<div class="table-grid-item">
									<div class="title clearfix">
										<div class="l">新增会员统计      合计   ${all }<c:if test="${empty(all) }">0</c:if>人</div>
										<div class="r">
											<!-- <a id="event-monitor-trend" class="detail-report-btn" href="/web/5473605/trend/time?siteId=1942168&amp;isTab=1">&nbsp;</a> -->
										</div>
									</div>
									<div id="line" style="position: relative; font-family: &quot;Microsoft Yahei&quot;, Helvetica, STHeitiSC-Light, Arial, sans-serif;">
										<div id='canvasDiv'></div>
									</div>
								</div>
							</div>
							<div style="position:relative;" class="right" id="search-word-container">
								<div class="table-grid-item">
									<div class="title clearfix">
										<div class="l">会员消费记录排行</div>
										<div class="r">
											<!-- <a id="event-monitor-word" class="detail-report-btn" href="/web/5473605/source/searchword?siteId=1942168"></a> -->
										</div>
									</div>
									<div class="table-data clearfix">
										<table cellpadding="0" cellspacing="0" class="table-layout-01">
											<thead>
												<tr>
													<td class="al url">会员姓名</td>
													<td class="ar" width="20%">会员手机号</td>
													<td class="ar" width="20%">消费金额</td>
												</tr>
											</thead>
											<tbody>
												<c:forEach items="${list }" var="list" varStatus="status">
													<tr>
														<td class="al url"><span class="nob">${status.index+1}</span><span class="ellipsis" title="${list.realname }">${list.realname }</span></td>
														<td class="ar"><span style="cursor: pointer "  id="ff">${list.telenumber }</span></td>
														<td class="ar"><c:if test="${!(empty list.rechareMoney)}">${list.rechareMoney }</c:if><c:if test="${(empty list.rechareMoney)}">0</c:if></td>
													</tr>
												</c:forEach>
											</tbody>
										</table>
									</div>
								</div>
								
							</div>
						</div>
					</div>
				</div>
				
				<div class="index-site" >
					<div class="first-row">
						<div class="clearfix table-grid">
							<div class="left">
								<div class="table-grid-item">
									<div class="title clearfix">
										<div class="l"><!-- 会员年龄比例 --></div>
										<div class="r">
											
										</div>
									</div>
									<div id='main1' class="table-data clearfix" style="width: 100%; height: 280px;">
										<!--  -->
										
									</div>
								</div>
							</div>
							<div style="position:relative;" class="right" id="search-word-container">
								<div class="table-grid-item">
									<div class="title clearfix">
										<div class="l"><!-- 会员性别比例 --></div>
										<div class="r">
											
										</div>
									</div>
									<div id='main2' class="table-data clearfix" style="width: 100%; height: 280px;">
										<!--  -->
									</div>
								</div>
								
							</div>
						</div>
					</div>
				</div>
				
				
				
			</div>
		</div>
		




		<div id="ss" style="border:1px solid #ddd;background:#eee;border-radius:5px;border:none;box-shadow:none;" class="theme-popover2">
			<span style="border:6px solid transparent;border-left: 18px solid #ccc;position: absolute;right: -24px;top: 15px;"></span>
			<div style="width:200px;overflow:hidden;position:relative;padding-top:40px;">
				<div class="biaoti_bar1 biaoti_bar active" style="text-align:left;height:40px;line-height:40px;padding:0 10px;padding-right:0px;position:absolute;top:0;left:0;width:100%;font-size:12px;">
					<span class="zs"></span>
									    	
				 </div>
			 </div>
		</div>
		<script src="/admin/statistics/js/jquery.js"></script>
		<script src="/admin/statistics/js/bootstrap.js"></script>
		<script src="/admin/statistics/js/city-picker.data.js"></script>
		<script src="/admin/statistics/js/city-picker.js"></script>
		<script src="/admin/statistics/js/main.js"></script>
		<script src="/admin/js/echarts.js"></script>
		<!-- 会员年龄饼图 -->
		<script>
		$(function(){
			var myChart = echarts.init(document.getElementById('main2'));
			option = {
			    title : {
			        text: '会员男女性别比例',
			        subtext: '',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: ['男','女']
			    },
			    series : [
			        {
			            name: '访问来源',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:[
			                {value:${sexList[1].nums}, name:'男'},
			                {value:${sexList[0].nums}, name:'女'}
			            ],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		})
		</script>
		<!-- 会员性别饼图 -->
		<script>
		$(function(){
			var myChart = echarts.init(document.getElementById('main1'));
			option = {
			    title : {
			        text: '会员年龄段比例',
			        subtext: '',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data:['0-19岁','20-25岁','26-30岁','31-35岁','36-40岁','41岁以上']
			    },
			    series : [
			        {
			            name: '访问来源',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:[
							{value:${ageList[0].nums}, name:'0-19岁'},
							{value:${ageList[1].nums}, name:'20-25岁'},
							{value:${ageList[2].nums}, name:'26-30岁'},
							{value:${ageList[3].nums}, name:'31-35岁'},
							{value:${ageList[4].nums}, name:'36-40岁'},
							{value:${ageList[5].nums}, name:'41岁以上'}
			            ],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		})
		</script>
		<!-- 弹框部分 -->
		<script>
		function selknow(bookId,e){
			var left=e.getBoundingClientRect().left;
			var top=e.getBoundingClientRect().top;
			console.log(top);
			$('#ss').css({
				position:'absolute',
				top:top-14,
				left:left-230
			}) 
			
			
		  	$('.theme-popover-mask').fadeIn(100);
		    $('.theme-popover2').slideDown(100);
			$.ajax({
				type:"post",
				data:{"bookId":bookId},
				url:"/admin/book/selKnowId",
				success:function(data){
					var n="";
					$(".zs").empty();
					$.each(data.list,function(i,item){	
						n+=item.knowName+","
					});
					$(".zs").append(n);
				},
				error:function(data){
					
				}
			})  
			
		}
		
		 function out(){
			$('.theme-popover2').slideUp(100);
		    $('.theme-popover-mask').fadeOut(100);
	 	} 
		
		
		
		
		
			$(function(){
			var flow=[];
			var flows=$("#jieyue").val();
			var flo=flows.split(","); //字符分割
			for (i=0;i<flo.length-1 ;i++ ){
				flow[i]=flo[i]; //分割后的字符输出
			}
/*  			for(var i=0;i<25;i++){
				flow.push(Math.floor(Math.random()*(10+((i%16)*5)))+10);
			}  */
			var data = [
			         	{
			         		name : 'PV',
			         		value:flow,
			         		color:'#4FA8FA',
			         		line_width:2
			         	}
			         ];
//			var labels = ["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24"];
			var labels =[];
			var label =$("#shijian").val();
			var strs=label.split(","); //字符分割
			for (i=0;i<strs.length-1 ;i++ ){
				labels[i]=strs[i]; //分割后的字符输出
			}
			var chart = new iChart.LineBasic2D({
				render : 'canvasDiv',
				data: data,
				align:'center',
//				title : {
//					text:'ichartjs官方网站上一日PV流量',
//					font : '微软雅黑',
//					fontsize:24,
//					color:'#b4b4b4'
//				},
//				subtitle : {
//					text:'14:00-16:00访问量达到最大值',
//					font : '微软雅黑',
//					color:'#b4b4b4'
//				},
//				footnote : {
//					text:'ichartjs.com',
//					font : '微软雅黑',
//					fontsize:11,
//					fontweight:600,
//					padding:'0 28',
//					color:'#b4b4b4'
//				},
				width : 800,
				height : 335,
				shadow:true,
				shadow_color : '#4FA8FA',
				shadow_blur : 8,
				shadow_offsetx : 0,
				shadow_offsety : 0,
				border:'none',
				background_color:'#fff',
				animation : true,//开启过渡动画
				animation_duration:600,//600ms完成动画
				tip:{
					enable:true,
					shadow:true,
					listeners:{
						 //tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引
						parseText:function(tip,name,value,text,i){
							 return "<span style='color:#005268;font-size:12px;'>"+labels[i]+"${xs}"+
								"</span><span style='color:#005268;font-size:20px;'>"+value+"个</span>";
						}
					}
				},
				crosshair:{
					enable:true,
					line_color:'#ec4646'
				},
				sub_option : {
					smooth : true,
					label:false,
					hollow:false,
					hollow_inside:false,
					point_size:8
				},
				coordinate:{
					width:640,
					height:260,
					striped_factor : 0.18,
					grid_color:'#fff',
					axis:{
						color:'#252525',
						width:[0,0,1,1]
					},
					scale:[{
						 position:'left',	
						 start_scale:0,
						 end_scale:10,
						 scale_space:1,
						 scale_size:2,
						 scale_enable : false,
						 label : {color:'#9d987a',font : '微软雅黑',fontsize:11,fontweight:600},
						 scale_color:'#9f9f9f'
					},{
						 position:'bottom',	
						 label : {color:'#9d987a',font : '微软雅黑',fontsize:11,fontweight:600},
						 scale_enable : false,
						 labels:labels
					}]
				}
			});
			//利用自定义组件构造左侧说明文本
			chart.plugin(new iChart.Custom({
					drawFn:function(){
						//计算位置
						var coo = chart.getCoordinate(),
							x = coo.get('originx'),
							y = coo.get('originy'),
							w = coo.width,
							h = coo.height;
						//在左上侧的位置，渲染一个单位的文字
						chart.target.textAlign('start')
						.textBaseline('bottom')
						.textFont('600 11px 微软雅黑')
						.fillText('会员数',x-40,y-12,false,'#9d987a')
						.textBaseline('top')
						.fillText('(${sj})',x+w+12,y+h+10,false,'#9d987a');
						
					}
			}));
		//开始画图
		chart.draw();
	});
		</script>
	</body>
</html>